<%@ page language="java" contentType="text/html;charset=UTF-8"
	pageEncoding="utf-8"%>
<html>
<head>
	<meta charset="UTF-8">
	<title>mamadi</title>
	<link rel="stylesheet" type="text/css" href="css/common.css">
</head>
<body>
	<div class="wrapper">
		<div class="header">
			<div class="heading">
				<div class="logo">
					Hi,I am logo.<br/>
					嗨,我是麻麻的。
				</div>
				<div class="sertch-box">
					<input type="text" placeholder="输入关键字" />
					<span class="btn search-btn">搜索</span>
				</div>
			</div>
		</div>
		<div class="content">
			<div class="list">
				<div class="row list-header">
					<div class="item">
						ID
					</div>
					<div class="item">
						名称
					</div>
					<div class="item">
						操作
					</div>
				</div>
			</div>
			<div class="btn-box add">
				<div class="btn">增加新类别</div>
			</div>
		</div>
		<div class="footer"></div>
	</div>
</body>
<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="js/common.js"></script>
<script type="text/javascript">
	var productCatalogArray = new Array();
		if(localStorage.getItem("productCatalog") != null) {
			productCatalogArray = JSON.parse(localStorage.getItem("productCatalog"));
			$(".list").empty();
			var s = "";
			    s += '<div class="row list-header">';
				s += '<div class="item">';
				s += 'ID';
				s += '</div>';
				s += '<div class="item">';
				s += '名称';
				s += '</div>';
				s += '<div class="item">';
				s += '操作';
				s += '</div>';
				s += '</div>';
				for(var i = 0; i < productCatalogArray.length; i++) {
					s += '<div class="row">';	
					s += '<div class="item">';
					s += productCatalogArray[i].id;
					s += '</div>';
					s += '<div class="item">';
					s += productCatalogArray[i].attr1;
					s += '</div>';
					s += '<div class="item">';
					s += '<div class="btn-box">';
					s += '<div class="btn del-btn">删除</div>';
					s += '<div class="btn edit-btn">管理</div>';
					s += '<input type="hidden" class="id" value="' + i + '">';
					s += '</div>';
					s += '</div>';
					s += '</div>';
				}
			$(".list").append(s);
		}
		else {
			$(".list").empty();
			var s = "";
			    s += '<div class="row list-header">';
				s += '<div class="item">';
				s += 'ID';
				s += '</div>';
				s += '<div class="item">';
				s += '名称';
				s += '</div>';
				s += '<div class="item">';
				s += '操作';
				s += '</div>';
				s += '</div>';
			$(".list").append(s);
			$(".list").append("<div class='msg'>暂无数据</div>");
		}
	var productArray = new Array();
		if(localStorage.getItem("product") != null) {
			productArray = JSON.parse(localStorage.getItem("product"));
		}
	$(document).ready(function() {
		var itemNum = 3;

		$(".add .btn").click(function() {
			addRow(itemNum, "productCatalog");
		});
	});

	$(document).on("click", ".edit-btn",function() {
		var index = parseInt($(this).parent(".btn-box").find(".id").val());
		$(this).parents(".row").children(".item").eq(1).html("<input type='text' value=" + productCatalogArray[index].attr1 + ">");

		$(this).parent(".btn-box").append('<div class="btn cancel-btn">取消</div><div class="btn save-btn">保存</div>');
		$(this).hide();
		$(this).prev().hide();
	});

	$(document).on("click", ".save-btn", function() {
		var index = parseInt($(this).parent(".btn-box").find(".id").val());
		if(productCatalogArray[index] == "" || productCatalogArray[index] == null || productCatalogArray[index] == "undefined") {
			$newItem = $(this).parents(".new-row").children(".item");
			var param = {};

			param["id"] = $newItem.eq(0).text();
			for(i = 1; i < 2; i++) {
				$input = $newItem.eq(i).children("input");
				param[$input.attr("name")] = $input.val();
			}
			console.log(param);
			productCatalogArray.push(param);
			localStorage.setItem("productCatalog", JSON.stringify(productCatalogArray));

			$(this).parent(".btn-box").append('<div class="btn del-btn">删除</div><div class="btn edit-btn">管理</div>');
			$(this).hide();
			$(this).prev().hide();
			window.location.reload();
		}
		else {
			productCatalogArray[index].attr1 = $(this).parents(".row").children(".item").eq(1).find("input").val();
			localStorage.setItem("productCatalog", JSON.stringify(productCatalogArray));

			$(this).parent(".btn-box").append('<div class="btn del-btn">删除</div><div class="btn edit-btn">管理</div>');
			$(this).hide();
			$(this).prev().hide();
			window.location.reload();
		}
	});

	$(document).on("click", ".cancel-btn", function() {
		if($(this).parents(".new-row").length != 0) {
			$(this).parents(".new-row").remove();
		}
		else {
			var index = parseInt($(this).parent(".btn-box").find(".id").val());
			$(this).parents(".row").children(".item").eq(1).html(productCatalogArray[index].attr1);
			$(this).parent(".btn-box").append('<div class="btn del-btn">删除</div><div class="btn edit-btn">管理</div>');
			$(this).hide();
			$(this).next().hide();
		}
	});

	$(document).on("click", ".del-btn", function() {
		if(confirm("确定要删除？")) {
			var delId = parseInt($(this).parents(".row").find(".id").val());
			var flag = 0;
			for(var i = 0; i < productArray.length; i++) {
				if(productCatalogArray[delId].attr1 == productArray[i].attr4) {
					flag = 1;
				}
			}
			if(flag == 1) {
				if(confirm("警告：该类别下的商品也会一并删除")) {
					for(var i = 0; i < productArray.length; i++) {
						if(productCatalogArray[delId].attr1 == productArray[i].attr4) {
							productArray.remove(i);
						}
					}
					if(productArray == null || productArray.length == 0 || productArray == "") {
						localStorage.removeItem("product");
					}
					else {
						localStorage.setItem("product", JSON.stringify(productArray));
					}

					productCatalogArray.remove(delId);
					if(productCatalogArray == null || productCatalogArray.length == 0 || productCatalogArray == "") {
						localStorage.removeItem("productCatalog");
					}
					else {
						localStorage.setItem("productCatalog", JSON.stringify(productCatalogArray));
					}

					window.location.reload();
				}
			}
			else {
				productCatalogArray.remove(delId);

				if(productCatalogArray == null || productCatalogArray.length == 0 || productCatalogArray == "") {
					localStorage.removeItem("productCatalog");
				}
				else {
					localStorage.setItem("productCatalog", JSON.stringify(productCatalogArray));
				}
				window.location.reload();
			}
		}
	});

	$(document).on("click", ".search-btn", function() {
		if(productCatalogArray.length != 0) {
			var keyWord = $(this).prev().val();
			var flag = 0;
			$(".list").empty();
			$(".add").hide();
			var s = "";
			    s += '<div class="row list-header">';
				s += '<div class="item">';
				s += 'ID';
				s += '</div>';
				s += '<div class="item">';
				s += '名称';
				s += '</div>';
				s += '<div class="item">';
				s += '操作';
				s += '</div>';
				s += '</div>';
			for(var i = 0; i < productCatalogArray.length; i++) {
				if(productCatalogArray[i].attr1 == keyWord || productCatalogArray[i].attr2 == keyWord || productCatalogArray[i].attr3 == keyWord || productCatalogArray[i].attr4 == keyWord) {
					s += '<div class="row">';	
					s += '<div class="item">';
					s += productCatalogArray[i].id;
					s += '</div>';
					s += '<div class="item">';
					s += productCatalogArray[i].attr1;
					s += '</div>';
					s += '<div class="item">';
					s += '<div class="btn-box">';
					s += '<div class="btn del-btn">删除</div>';
					s += '<div class="btn edit-btn">管理</div>';
					s += '<input type="hidden" class="id" value="' + i + '">';
					s += '</div>';
					s += '</div>';
					s += '</div>';
					flag = 1;
				}
			}
			$(".list").append(s);
			if(flag == 0) {
				alert("没你要的喔");
			}
		}
		else {
			alert("都没记录，干嘛呀你");
		}
	});
</script>
</html>